<template>
  <div class="swiperWrap">
    <div class="swiper">
      <swiper :options="swiperOption" ref="swiperTop">
        <swiper-slide class="cursor-pointer" v-for="(i,t) in showData" :key="t" :class="nodialogShow?'':'dialogShow'">
          <div v-if="nodialogShow" @click="imgClick(t)"
            v-show="getFileType(i.url) =='img' || getFileType(i.url) =='png'" class="bgcImg"
            :style="{backgroundImage:'url('+i.url+')',width:bagImgWh+'px',height:bagImgWh+'px'}"></div>
          <el-image v-else :class="nodialogShow?'nodialogShow':''"
            v-show="getFileType(i.url) =='img' || getFileType(i.url) =='png'" :src="i.url" alt="" srcset=""
            @click="imgClick(t)" :fit="nodialogShow?'fill':'contain'" :title='i.name'></el-image>
          <div v-show="i.type =='mp4'" @click="videoClick(t)">
            <img :class="nodialogShow?'nodialogShow':''" v-if="videoPreviewShow" src="../../assets/vp.png" alt=""
              srcset="" :title='i.name'>
            <video :class="nodialogShow?'nodialogShow':''" controls v-else :autoplay="false" :src="i.url" alt=""
              :id='t +"video"' />
          </div>
        </swiper-slide>
        <div class="swiper-button-prev" :class="nodialogShow?'swiper-button-prev1':''"
          v-if="showData.length>slidesPerView" slot="button-prev">
        </div>
        <div class="swiper-button-next" :class="nodialogShow?'swiper-button-next1':''"
          v-if="showData.length>slidesPerView" slot="button-next"></div>
      </swiper>
    </div>

  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    swiper,
    swiperSlide,
  },
  props: {
    showData: {
      type: Array,
      default: () => [
        // {
        //   type: 'img',
        //   url: 'https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2103/03/c206/255655968_1614786404388.png',
        // },
        // { type: 'mp4', url: 'https://imgpp.ztupic.com/u/Nj88WMcp86/1594351227763_8f7399bf.mp4' },
        // {
        //   type: 'img',
        //   url: 'https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2103/03/c206/255656124_1614786404382.png',
        // },
        // { type: 'mp4', url: 'https://imgpp.ztupic.com/u/Nj88WMcp86/1594351227763_8f7399bf.mp4' },
      ],
    },

    videoPreview: {
      // 表格中展示视频处理为图片
      type: Boolean,
      default: false,
    },
    slidesPerView: {
      // 展示条数
      type: Number,
      default: 1,
    },
    bagImgWh: {
      // 非dialog 图片展示大小
      type: Number,
      default: 58,
    },
    initialSlide: {
      // 展示条数
      type: Number,
      default: 0,
    },
    spaceBetween: {
      // 间距
      type: Number,
      default: null,
    },
    nodialogShow: {
      // 是否要调整大小
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      videoPreviewShow: this.videoPreview,
      swiperOption: {
        // loop: true,
        slidesPerView: this.slidesPerView,
        slidesPerGroup: this.slidesPerView,
        initialSlide: this.initialSlide,
        grabCursor: true,
        // centeredSlides: true,
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          click: function () {
            this.realIndex = 2
            let videos = document.querySelectorAll('video')
            for (let i = 0; i < videos.length; i++) {
              videos[i].pause()
            }
          },
        },
      },
    }
  },
  computed: {
    swiper() {
      return this.$refs.swiperTop.swiper
    },
  },
  mounted() {},
  methods: {
    // 根据url 获取文件类型
    getFileType(url) {
      var spl = url.split('.')
      return spl[spl.length - 1]
    },
    imgClick(t) {
      this.$emit('imgClick', this.showData, t)
    },
    videoClick(t) {
      this.$emit('videoClick', this.showData, t)
    },
  },
}
</script>
<style lang='sass' scoped >
.swiperWrap
  position: relative
  z-index: 99
.swiper .swiper-container
  position: relative
  width: 100%
  & .swiper-slide
    padding: 0 10px
    text-align: center
    .nodialogShow
      width: 100%
      line-height: 1.5
  .dialogShow
    height: 650px
    display: flex
    justify-content: center
    align-items: center
    box-sizing: border-box
.bgcImg
  background-size: cover

.swiper-button-prev1
  width: 15px
  height: 20px
  background-size: cover
  position: absolute
  left: 0px
  top: 65%
.swiper-button-next1
  width: 15px
  height: 20px
  background-size: cover
  position: absolute
  right: 0
  top: 65%
</style>
